<template>
    <div class="menageView">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-cascades"></i> 小说管理
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="flex">
            <div class="selectList">
                <el-tree :data="data" icon-class="none"  :props="defaultProps" @node-click="handleNodeClick"></el-tree>
            </div>
            <div class="container">
                <el-button type="primary" @click="addBooks()">新增</el-button>
                <el-table class="tableView" :data="tableData" style="width: 100%">
                    <el-table-column prop="id" label="序号" align="center" width="50" fixed="left"></el-table-column>
                    <el-table-column prop="title" label="小说名称" width="180"></el-table-column>
                    <el-table-column prop="categoryName" label="分类" width="180"></el-table-column>
                    <el-table-column label="书籍类型">
                          <template slot-scope="scope">
                            <el-tag
                                type="warning"
                                v-show="scope.row.bookType == 'book_audio'"
                            >音频书</el-tag>
                            <el-tag
                                type="warning"
                                v-show="scope.row.bookType != 'book_audio'"
                            >电子书</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="speaker" label="主播/工作室" width="220" align="center"></el-table-column>
                    <el-table-column prop="author" label="作者"></el-table-column>
                    <el-table-column  label="章节更新信息" width="180">
                         <template slot-scope="scope">
                            {{scope.row.newestChapterNo?'第 '+scope.row.newestChapterNo+' 章':'暂无章节信息'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="updateStatus" label="完结情况">
                        <template slot-scope="scope">
                            <el-tag
                                type="warning"
                                v-show="scope.row.updateStatus == 'update_status_serial'"
                            >连载中</el-tag>
                            <el-tag
                                type="warning"
                                v-show="scope.row.updateStatus == 'update_status_end'"
                            >已完结</el-tag>
                            <el-tag
                                type="warning"
                                v-show="scope.row.updateStatus == 'update_status_stop'"
                            >已停更</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="auditStatus" label="审核情况">
                        <template slot-scope="scope">
                            <el-tag
                                type="warning"
                                v-show="scope.row.auditStatus == 'audit_status_wait'"
                            >待审核</el-tag>
                            <el-tag
                                type="success"
                                v-show="scope.row.auditStatus == 'audit_status_pass'"
                            >已通过</el-tag>
                            <el-tag
                                type="warning"
                                v-show="scope.row.auditStatus == 'audit_status_nopass'"
                            >未通过</el-tag>
                            <el-tag
                                type="warning"
                                v-show="scope.row.auditStatus == 'audit_status_draft'"
                            >草稿</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="280" fixed="right">
                        <template slot-scope="scope">
                            <div class="operatioButton flex">
                                <el-button :type="scope.row.auditStatus == 'audit_status_nopass' ? 'info':'primary'" @click="scope.row.auditStatus == 'audit_status_nopass' ? '':visible(scope.row)">章节管理</el-button>
                                <el-button :type="scope.row.auditStatus == 'audit_status_nopass' ? 'info':'primary'" @click="scope.row.auditStatus == 'audit_status_nopass' ? '':successBut(scope.row)">章节状态</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <block v-if="tableData.length>0">
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :current-page.sync="currentPage"
                        :page-size="10"
                        layout="prev, pager, next, jumper"
                        :total="pageSize"
                    ></el-pagination>
                </block>
            </div>
            <!-- 编辑弹出框 -->
            <el-dialog title="新增" :visible.sync="editVisible" width="30%">
                <el-form ref="form" :model="form" label-width="70px" style="min-width:300px;">

                    <el-form-item label="作品名称">
                        <el-input style="width:300px;" v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="作者名字">
                        <el-input style="width:300px;" v-model="form.author"></el-input>
                    </el-form-item>
                    <el-form-item label="作品类型">
                        <!-- <el-input style="width:300px;" v-model="form.bookType"></el-input> -->
                        <el-select
                            v-model="form.bookType"
                            placeholder="请选择"
                            @change="onChangeBookType"
                        >
                            <el-option
                                v-for="item in bookTypeList"
                                :key="item.dictDataKey"
                                :label="item.dictDataValue"
                                :value="item.dictDataKey"
                            ></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="作品类别">
                        <!-- <el-input style="width:300px;" v-model="form.categoryId"></el-input> -->
                        <el-cascader
                            :disabled="bookCategory.length==0?true:false"
                            expand-trigger="hover"
                            :options="bookCategory"
                            v-model="selectedOptions"
                            @change="handleChange"
                        ></el-cascader>
                    </el-form-item>
                    <el-form-item label="主播工作室">
                        <el-input style="width:300px;" v-model="form.speaker"></el-input>
                    </el-form-item>
                    <el-form-item label="是否免费">
                        <!-- <el-input style="width:300px;" v-model="form.isfree"></el-input> -->
                        <el-switch
                            v-model="form.free"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                        ></el-switch>
                    </el-form-item>
                    <el-form-item label="购买方式">
                        <!-- <el-input style="width:300px;" v-model="form.buyWayStatus"></el-input> -->
                        <el-select v-model="form.buyWayStatus" placeholder="请选择">
                            <el-option
                                v-for="item in buyWayStatusList"
                                :key="item.dictDataKey"
                                :label="item.dictDataValue"
                                :value="item.dictDataKey"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="价格">
                        <el-input style="width:300px;" v-model="form.price"></el-input>
                    </el-form-item> -->
                    <el-form-item label="章节价格">
                        <el-input style="width:300px;" v-model="form.chapterPrice"></el-input>
                    </el-form-item>
                    <el-form-item label="是否支持下载">
                        <!-- <el-input style="width:300px;" v-model="form.isDownload"></el-input> -->
                        <el-switch
                            v-model="form.download"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                        ></el-switch>
                    </el-form-item>
                    <el-form-item label="描述">
                        <el-input type="textarea" style="width:300px;" v-model="form.desc"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="主播id">
                        <el-input style="width:300px;" v-model="form.anchorid"></el-input>
                    </el-form-item>-->
                    <el-form-item label="图书封面">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                        <input type="file" id="fileExports" @change="handleImgChange" ref="inputer" />
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="editVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveEdit">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 操作弹出框 -->
            <el-dialog title="操作" :visible.sync="onUserClick" width="30%">
                    <el-button type="primary" @click="successBut('update_status_serial')">连 载</el-button>
                    <el-button type="primary" @click="successBut('update_status_end')">完 结</el-button>
                    <el-button type="primary" @click="successBut('update_status_stop')">停 更</el-button>
            </el-dialog>

        </div>
    </div>
</template>

<script>
import Qs from 'qs';

export default {
    data() {
        return {
            data: [],
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            tableData: [],
            currentPage: 1,
            pageSize: 10,
            selectId: 0,
            editVisible: false,
            form: {
                author: '',
                title: '',
                bookType: '',
                speaker: '',
                isFree: 1,
                free: true,
                buyWayStatus: '',
                price: 0,
                chapterPrice: "",
                categoryId: '',
                isDownload: 1,
                download: true,
                desc: '',
                anchorId: localStorage.getItem('anchorId'),
                cover: ''
            },
            imageUrl: '',
            selectedOptions: [],
            bookTypeList: [],
            bookCategory: [],
            buyWayStatusList: [],
            onUserClick:false,
            currentId:0
        };
    },
    created() {
        //获取分类
        this.onSelectList();
        //获取下拉数据
        this.getDictData();
        //获取支付方式下拉数据
        this.getBuyWayData();
    },
    methods: {
        getBuyWayData() {
            this.$request
                .getDictData(Qs.stringify({ dictDefKey: 'BuyWayStatus' }))
                .then((res) => {
                    console.log('frils', res);
                    this.buyWayStatusList = res.data.content;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        getDictData() {
            this.$request
                .getDictData(Qs.stringify({ dictDefKey: 'bookType' }))
                .then((res) => {
                    console.log('frils', res);
                    this.bookTypeList = res.data.content;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        onChangeBookType(e) {
            console.log(e);
            let list = this.data,
                newList = [];
            for (let i in list) {
                if (e == 'book_audio') {
                    if (list[i].label == '音频书') {
                        newList = list[i];
                    }
                } else {
                    if (list[i].label != '音频书') {
                        newList = list[i];
                    }
                }
            }
            this.bookCategory = newList;
            this.form.categoryId = '';
        },
        handleChange(value) {
            this.form.categoryId = value[value.length - 1];
        },
        handleImgChange() {
            let inputDOM = this.$refs.inputer;
            this.file = inputDOM.files[0]; // 通过DOM取文件数据
            console.log(this.file)
            let size = Math.floor(this.file.size / 1024); //计算文件的大小
            this.formData = new FormData(); //new一个formData事件
            this.formData.append('file', this.file); //将file属性添加到formData里 //此时formData就是我们要向后台传的参数了
            this.$request
                .setUpDataCover(this.formData)
                .then((res) => {
                    console.log('frils', res);
                    this.form.cover = res.data.content.cover;
                    this.imageUrl = res.data.content.url;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        visible(data) {
            console.log(data.auditStatus)
            this.$router.push({
                path: '/borrowBooks',
                query: {
                    bookId: data.id,
                    type:data.updateStatus
                }
            });
        },
        successBut(event){
            if(!this.onUserClick){
                this.onUserClick = true
                this.currentId = event.id
            }else{
                let anchorId = localStorage.getItem('anchorId');
                this.$request
                    .uploadBookStatus(Qs.stringify({bookId:this.currentId,updateStatus:event}))
                    .then((res) => {
                        console.log(res);
                        this.$message.success('操作成功');
                        this.onUserClick = false
                        this.onGetbookList(anchorId,'')
                    })
                    .catch((err) => {
                        console.log(err);
                    });
            }
        },
        saveEdit() {
            this.form.isFree = this.form.free ? 1 : 0;
            this.form.isDownload = this.form.download ? 1 : 0;
            let anchorId = localStorage.getItem('anchorId');

            let info = this.form;
            if (
                !info.author ||
                !info.title ||
                !info.bookType ||
                !info.speaker ||
                !info.buyWayStatus ||
                !info.chapterPrice ||
                !info.categoryId ||
                !info.desc ||
                !info.cover
            ) {
                this.$message.warning('请填写完整信息');
                return false;
            }
            this.$request
                .insterBookInfo(this.form)
                .then((res) => {
                    console.log(res);
                    if (res.data.statusCode != 200) {
                        this.$message.warning(res.data.content);
                        return false;
                    }
                    this.$message.success('新增书籍成功');
                    this.editVisible = false;
                    this.onGetbookList(anchorId,'')
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        addBooks() {
            this.editVisible = true;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
            let anchorId = localStorage.getItem('anchorId');
            this.onGetbookList(anchorId, this.selectId);
        },
        handleNodeClick(data) {
            let anchorId = localStorage.getItem('anchorId');
            this.selectId = data.id;
            this.onGetbookList(anchorId, data.id);
        },
        onGetbookList(anchorId, id) {
            let data = {
                 anchorId: anchorId, pageNum: this.currentPage, pageSize: 10 
            }
            if(id){
                data.id = id
            }
            this.$request
                .getAllBookByCategroyId(data)
                .then((res) => {
                    this.tableData = res.data.content.content;
                    this.pageSize = 10 * res.data.content.totalPages;
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        onSelectList() {
            let anchorId = localStorage.getItem('anchorId');
            this.$request
                .getBookCategroy({})
                .then((res) => {
                    let infoList = res.data.content;
                    for (let i in infoList) {
                        infoList[i].label = infoList[i].categoryName;
                        infoList[i].value = infoList[i].id;
                        infoList[i].children = infoList[i].childrenList;
                        for (let o in infoList[i].childrenList) {
                            infoList[i].childrenList[o].label = infoList[i].childrenList[o].categoryName;
                            infoList[i].childrenList[o].value = infoList[i].childrenList[o].id;
                            infoList[i].childrenList[o].children = infoList[i].childrenList[o].childrenList;
                            for (let p in infoList[i].childrenList[o].childrenList) {
                                infoList[i].childrenList[o].childrenList[p].value = infoList[i].childrenList[o].childrenList[p].id;
                                infoList[i].childrenList[o].childrenList[p].label =
                                    infoList[i].childrenList[o].childrenList[p].categoryName;
                            }
                        }
                    }
                    infoList.unshift({label:'全部',id:''})
                    this.data = infoList;
                    this.selectId = infoList[0].id;
                    this.onGetbookList(anchorId,'');
                })
                .catch((err) => {
                    console.log(err);
                });
        }
    }
};
</script>


<style lang='scss' >
@import './index.scss';

.el-dialog {
    min-width: 600px !important;
}
</style>
